import Taro, { Component } from '@tarojs/taro'
import ClassNames from 'classnames'
import { AtActionSheet } from 'taro-ui'
import PropsType from 'prop-types'
import { View, Image, Text } from '@tarojs/components'
import '../styles/number.scss'

class DNumber extends Component {

    constructor(props) {
        super(props)
        this.state = {
            numberArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'],
            value: '',
            status: false,
            count: 0,
            active: '' // 激活样式
        }
    }

    onCancelHandle() {
        this.props.onCancelHandle && this.props.onCancelHandle()
    }

    onCloseHanlde() {
        let { value, status, count } = this.state
        if (count > 0 && status) {
            count--
        }
        if (value.split('.').length === 2 && !value.split('.')[1].length) {
            status = false
            count = 0
        }
        value = value.substr(0, value.length - 1)
        this.setState({
            value,
            count,
            status
        })
    }

    onItemHandle(item) {
        let { value, status, count } = this.state
        if (count === 2) {
            return
        }
        if (status && item !== '.') {
            count++
            this.setState({
                count
            })
        }
        if (status && item === '.') {
            return
        }
        if (item === '.') {
            status = true
        }
        this.setState({
            value: value + item,
            status
        })
    }

    onStartHandle(i) {
        this.setState({
            active: i
        })
    }

    onEndHandle() {
        this.setState({
            active: ''
        })
    }

    onSubmit() {
        const { value } = this.state
        this.props.onSubmit && this.props.onSubmit(value)
    }

    render() {
        const {
            className,
            isOpened
        } = this.props
        const {
            numberArr,
            value,
            active
        } = this.state
        return (
            <View className={ClassNames('b_number', className)}>
                <View className='b_number__value'>{value}</View>
                <AtActionSheet isOpened={isOpened} onClose={this.onCancelHandle.bind(this)}>
                    <View className='b_number__item'>
                        {
                            numberArr && numberArr.map((item, i) => {
                                return <View className={ClassNames('b_number__item-text', active === i ? 'b_number__item-active' : '')} onTouchStart={this.onStartHandle.bind(this, i)} onTouchEnd={this.onEndHandle.bind(this)} onClick={this.onItemHandle.bind(this, item)}>{item}</View>
                            })
                        }
                    </View>
                    <View className='b_number__close' onClick={this.onCloseHanlde.bind(this)}>x</View>
                    <View className='b_number__success' onClick={this.onSubmit.bind(this)}>完成</View>
                </AtActionSheet>
            </View>
        )
    }
}

DNumber.PropsType = {
    className: PropsType.oneOfType[PropsType.string, PropsType.object],
    isOpened: PropsType.bool,
    onSubmit: PropsType.func,
    onCancelHandle: PropsType.func
}

export default DNumber